<template>
  <view class="log-container">
    <view class="log-header">
      <text class="header-title">日志类型演示</text>
      <text class="header-desc">点击按钮触发不同级别的日志输出</text>
    </view>
    
    <view class="button-grid">
      <!-- 普通日志按钮 -->
      <button class="log-btn log-btn--log" @click="onLog()">
        <text class="btn-icon">📝</text>
        <text class="btn-text">console.log</text>
      </button>
      
      <!-- 调试日志按钮 -->
      <button class="log-btn log-btn--debug" @click="onDebug()">
        <text class="btn-icon">🔍</text>
        <text class="btn-text">console.debug</text>
      </button>
      
      <!-- 信息日志按钮 -->
      <button class="log-btn log-btn--info" @click="onInfo()">
        <text class="btn-icon">ℹ️</text>
        <text class="btn-text">console.info</text>
      </button>
      
      <!-- 警告日志按钮 -->
      <button class="log-btn log-btn--warn" @click="onWarn()">
        <text class="btn-icon">⚠️</text>
        <text class="btn-text">console.warn</text>
      </button>
      
      <!-- 错误日志按钮 -->
      <button class="log-btn log-btn--error" @click="onError()">
        <text class="btn-icon">❌</text>
        <text class="btn-text">console.error</text>
      </button>
    </view>
    
    <view class="note-card">
      <text class="note-text">提示：请在控制台查看日志输出结果</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 普通日志打印
    onLog() {
      const name = "czy"; 
      if (name === 'czy') {
        console.log("登录验证成功");
      } else {
        console.warn("用户名验证失败（warn级别）");
      }
    },

    // 调试日志打印
    onDebug() {
      console.debug("this is debug log");
    },

    // 信息日志打印
    onInfo() {
      console.info("this is info log");
    },

    // 警告日志打印
    onWarn() {
      console.warn("this is warn log");
    },

    // 错误日志打印
    onError() {
      console.error("this is error message");
      try {
        // 可在此处编写可能抛出错误的代码
        // throw new Error("测试错误");
      } catch (e) {
        console.error("catch error: " + e);
      }
    }
  }
};
</script>

<style scoped>
.log-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding: 30rpx;
  box-sizing: border-box;
}

/* 头部区域 */
.log-header {
  text-align: center;
  margin: 40rpx 0 60rpx;
}

.header-title {
  font-size: 38rpx;
  font-weight: 600;
  color: #1e293b;
  display: block;
  margin-bottom: 15rpx;
}

.header-desc {
  font-size: 26rpx;
  color: #64748b;
}

/* 按钮网格布局 */
.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25rpx;
  margin-bottom: 40rpx;
}

/* 基础按钮样式 */
.log-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 180rpx;
  border: none;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.log-btn:active {
  transform: translateY(3rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.btn-icon {
  font-size: 50rpx;
  margin-bottom: 15rpx;
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
}

/* 不同类型按钮配色 */
.log-btn--log {
  background-color: #3b82f6;
}

.log-btn--debug {
  background-color: #8b5cf6;
}

.log-btn--info {
  background-color: #10b981;
}

.log-btn--warn {
  background-color: #f59e0b;
}

.log-btn--error {
  background-color: #ef4444;
}

/* 提示卡片 */
.note-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border-left: 5rpx solid #94a3b8;
}

.note-text {
  font-size: 26rpx;
  color: #64748b;
}
</style>